<script setup>
import useAuthStore from '@/store/auth'
import { LOGIN_URL } from '@/config'
import api from '@/api'
import { useRouter } from 'vue-router'

const $authStore = useAuthStore()
const $router = useRouter()

const logout = async () => {
  showConfirmDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
  })
    .then(async () => {
      //   try {
      await api.post('/auth/logout')
      $router.replace({ path: LOGIN_URL + '?id=' + $authStore.company.number })
      $authStore.clear()
      //   } catch (error) {}
    })
    .catch(() => {})
}
</script>

<template>
  <div class="page-profile">
    <!-- <van-cell-group style="margin-bottom: 20px">
      <van-cell>
        <template #title>
          <div class="username">{{ $authStore.name }}({{ $authStore.username }})</div>
          <div class="company">{{ $authStore.company.name }}</div>
        </template>
      </van-cell>
    </van-cell-group> -->
    <div class="head">
      <img class="avatar" src="@/assets/img/avatar.png" alt="">
      <div>
        <div class="username">{{ $authStore.name }}</div>
        <div class="mobile">{{ $authStore.username }}</div>
      </div>
    </div>

    <!-- <van-cell-group style="margin-bottom: 20px">
      <van-cell title="剩余剪辑次数" value="7" />
    </van-cell-group> -->

    <van-cell-group>
      <van-cell v-if="$authStore.company.ip_status" title="素材中心" is-link @click="$router.push('/ip')" />
      <van-cell title="学习记录" is-link @click="$router.push('/profile/studyRecord')" />
      <van-cell title="修改密码" is-link @click="$router.push('/profile/modifyPassword')" />
      <!-- <van-cell title="意见反馈" is-link @click="$router.push('/feedback')" /> -->
      <van-cell title="退出登录" is-link @click="logout" />
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
.page-profile {
  width: 100vw;
  height: 100vh;
  background: #f7f8fa;

  .username {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .company {
    color: #999999;
    font-size: 13px;
    margin-top: 5px;
  }
}

.head {
  height: 140px;
  background-color: #07c160;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  color: #fff;
}

.avatar {
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  margin-right: 10px;
}
</style>
